<template>
  <div class="table-container">
    <div class="table-title">电源匹配表</div>
    <div class="formula-detail">
      <el-collapse class="formula-collapse" v-model="activeNames" accordion @change="handleChange">
        <el-collapse-item title="公式详情" name="1">
          <div class="formula">风电总价F = 风力发电度数A * 风力单价B</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table :data="tableData" border style="width: 100%" show-summary>
      <el-table-column prop="settle" label="结算单元" width="150" />
      <el-table-column label="居民农业（含线损、余电上网）">
        <el-table-column prop="electric" label="电量" width="120" />
        <el-table-column prop="price" label="单价" width="120" />
        <el-table-column prop="cost" label="电费" />
      </el-table-column>
      <el-table-column label="工商业">
        <el-table-column prop="business_electric" label="电量" width="120" />
        <el-table-column prop="business_price" label="单价" width="120" />
        <el-table-column prop="business_cost" label="电费" />
      </el-table-column>
      <el-table-column label="小计">
        <el-table-column prop="sum_electric" label="电量" width="120" />
        <el-table-column prop="sum_price" label="单价" width="120" />
        <el-table-column prop="sum_cost" label="电费" />
      </el-table-column>
    </el-table>

    <!-- <div class="row-btn">
      <div v-if="status == '0' || checkStatus == '0'">
        <el-button size="default" @click="save">保存</el-button>
        <el-button size="default" type="primary" @click="submit">提交</el-button>
      </div>
      <el-button v-if="checkStatus == '2'" size="default" type="primary" @click="check">
        通过/不通过
      </el-button>
      <el-button v-if="checkStatus == '1'" size="default" type="primary" @click="exportExcel">
        导出
      </el-button>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import { reactive, ref, h } from 'vue';
import type { VNode } from 'vue';

defineOptions({
  name: 'PowerSupply',
  inheritAttrs: false,
});

const props = defineProps({
  basicData: {
    type: [Array, Object],
    default: () => {},
  },
});

const route = useRoute(); // 获取路由参数
const status = route.query.status as String; // 填报状态 0-草稿 1-提交
const checkStatus = route.query.checkStatus as String; // 审核状态 0-不通过 1-通过(导出) 2-待审核
const curNo = route.query.no || '';

const activeNames = ref('1');
const handleChange = (val: any) => {};

const tableData = ref([
  {
    settle: '国内自由电源',
    electric: '100',
    price: '0.5',
    cost: '50',
    business_electric: '100',
    business_price: '0.5',
    business_cost: '50',
    sum_electric: '100',
    sum_price: '0.5',
    sum_cost: '50',
  },
  {
    settle: '国内其他电源',
    electric: '100',
    price: '0.5',
    cost: '50',
    business_electric: '100',
    business_price: '0.5',
    business_cost: '50',
    sum_electric: '100',
    sum_price: '0.5',
    sum_cost: '50',
  },
  {
    settle: '县间交易购入',
    electric: '100',
    price: '0.5',
    cost: '50',
    business_electric: '100',
    business_price: '0.5',
    business_cost: '50',
    sum_electric: '100',
    sum_price: '0.5',
    sum_cost: '50',
  },
  {
    settle: '其他电网购入',
    electric: '100',
    price: '0.5',
    cost: '50',
    business_electric: '100',
    business_price: '0.5',
    business_cost: '50',
    sum_electric: '100',
    sum_price: '0.5',
    sum_cost: '50',
  },
]);
const formRef = ref<FormInstance>();
const ruleForm = ref<any>({
  no: curNo,
  name: '四川电力',
});
const statusOptions = reactive([
  {
    label: '草稿',
    value: '0',
  },
  {
    label: '提交',
    value: '1',
  },
  {
    label: '作废',
    value: '2',
  },
  {
    label: '不通过',
    value: '3',
  },
]);

const handleQuery = () => {};
const save = () => {};
const submit = () => {};
const check = () => {};
const exportExcel = () => {};
const print = () => {};

onMounted(() => {
  console.log('onmm');

  handleQuery();
});
</script>

<style lang="scss" scoped>
.row-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.formula-detail {
  display: flex;
  justify-content: flex-end;
}
.formula-collapse {
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding-left: 10px;

  :deep(.el-collapse-item__header) {
    color: #4080ff;
    background-color: transparent;
  }
}
.formula {
  padding: 5px;
}
</style>
